<template>
  <div>
    Lifestyle test:
    parent!!
    <button @click="changeCommon">change common number</button>
    <button @click="addSonNum">add son number</button>
    <button @click="subSonNum">sub son number</button>
    <p>common: {{commonNumber}} , toson: {{toSonNumber}}</p>
    <son1 :toSonNumber="toSonNumber" :commonNumber="commonNumber" />
    <son2 :toSonNumber="toSonNumber" :commonNumber="commonNumber" />
    {{some}}
  </div>
</template>
<script>
import Son1 from "./Son1";
import Son2 from './Son2';
export default {
  components: {
    Son1,
    Son2,
  },
  data() {
    return {
      commonNumber: 12,
      toSonNumber: 10
    };
  },
  methods: {
    changeCommon() {
      this.commonNumber = Math.floor(Math.random() * 50);
    },
    addSonNum() {
      ++this.toSonNumber;
    },
    subSonNum() {
      --this.toSonNumber;
    }
  },
  beforeCreate() {
    console.log("Parent before create!!");
  },
  created() {
    console.log("Parent created!!");
  },
  beforeMount() {
    this.some = "some";
    console.log("Parent before mount!!");
  },
  mounted() {
    console.log("Parent mounted!!");
  },
  beforeUpdate() {
    console.log("Parent before update!!");
  },
  updated() {
    console.log("Parent updated!!");
  },
  beforeDestroy() {
    console.log("Parent before destroy!!");
  },
  destroyed() {
    console.log("Parent destroyed!!");
  }
};
</script>